<script setup>
import {ElMessage} from "element-plus";
import {ref} from "vue";
import store from "../../store/index.js";
import {useRouter} from "vue-router";

const $router = useRouter();

const formRef = ref(null);
const registerStatus = ref(false);
const login_loading = ref(false);
const form = ref({
  username: '',
  password: ''
});
const rules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
});
const enterLogin = () => {
  if (registerStatus.value) {
    handleRegister();
  } else {
    login();
  }
};

const handleRegister = () => {
  login_loading.value = true;
  formRef['value'].validate((valid) => {
    if (valid) {
      let timer = setTimeout(() => {
        // TODO 调用后端的注册接口
        clearTimeout(timer);
      }, 1000);
    } else {
      login_loading.value = false;
      console.log('表单验证不通过');
    }
  });
};
const login = () => {
  login_loading.value = true;
  if (!form.value.username) {
    ElMessage.warning('请输入用户名');
    login_loading.value = false;
    return;
  }
  if (!form.value.password) {
    ElMessage.warning('请输入登录密码');
    login_loading.value = false;
    return;
  }
  // TODO 调用登录接口
  store.dispatch('login/handleLogin', form.value).then((res) => {
    ElMessage.success('登录成功');
    let timer = setTimeout(() => {
      login_loading.value = false;
      // TODO 登录成功，跳转到首页面
      $router.push('/main');
      clearTimeout(timer);
    }, 1000);
  }).catch(() => {
    login_loading.value = false;
  });
};
</script>

<template>
  <div class="v-login-container">
    <div class="v-login-box">
      <div class="v-login-header">
        <span class="v-login-title">欢迎登录</span>
        <span class="v-login-subtitle">请输入您的账号和密码登录</span>
      </div>
      <div class="v-login-form">
        <div class="v-login-form-box">
          <input type="text" placeholder="" v-model="form.username" @keyup.enter="enterLogin">
          <label for="name">用户名</label>
        </div>
        <div class="v-login-form-box">
          <input type="password" placeholder="" v-model="form.password" @keyup.enter="enterLogin">
          <label for="name">登录密码</label>
        </div>
        <div class="v-login-button">
          <el-button @click="login" :loading="login_loading">立即登录</el-button>
        </div>
      </div>
      <div class="v-login-footer">
        <a @click="handleRegister" href="javascript:void(0);">还没有账号？立即注册</a>
      </div>
      <div class="v-login-footer">
        <a href="javascript:void(0);">默认账号：admin/123456</a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep(.el-button) {
  background: #7f5feb;
  color: #dfdeee;
}

.v-login-container {
  height: 100vh;
  overflow: hidden;
  background-color: #1d243d;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .v-login-box {
    width: 400px;
    height: 400px;
    background-color: #212942;
    border-radius: 10px;
    border-top: 10px solid #8BD17C;
    border-bottom: 10px solid #79a6fe; /*79a6fe;*/
    box-shadow: 1px 1px 108px 19px #191f35;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .v-login-header {
      width: 100%;
      height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .v-login-title {
        font-size: 28px;
        color: #5c6bc0;
        margin-bottom: 10px;
      }
      
      .v-login-subtitle {
        font-size: 12px;
        color: #a1a4ad;
      }
    }
  }
  
  .v-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 30px;
    box-sizing: border-box;
    
    .v-login-button {
      width: 100%;
      text-align: center;
      
      > button {
        width: 100%;
        cursor: pointer;
        border: none;
        border-radius: 100px;
        background-color: rgba(127, 95, 235, .8);
        font-size: 16px;
        padding: 20px 10px;
        box-sizing: border-box;
        color: #dfdeee;
        margin-top: 10px;
        transition: all .5s ease-in-out;
      }
      
      > button:hover {
        transform: scale(1.05);
      }
    }
    
    .v-login-form-box {
      width: 100%;
      margin: 15px auto;
      box-sizing: border-box;
      background-color: #5c7fda;
      border-radius: 5px;
      position: relative;
    }
    
    .v-login-form-box input {
      width: 100%;
      padding: 12px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      outline: none;
      border: none;
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
      transition: border-color 0.5s ease;
      background-color: #262e49;
    }
    
    .v-login-form-box input:focus {
      border-color: #409EFF;
    }
    
    .v-login-form-box label {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      font-size: 12px;
      color: #999;
      transition: all 0.5s ease;
      /* 防止标签挡住输入框 */
      pointer-events: none;
    }
    
    .v-login-form-box input:focus + label, .v-login-form-box input:not(:placeholder-shown) + label {
      top: 0;
      left: 5px;
      font-size: 14px;
      font-weight: 600;
      color: #5c6bc0;
      border-radius: 5px;
      padding: 0 5px;
    }
  }
  
  .v-login-footer {
    height: 60px;
    
    > a {
      color: #5c7fda;
      font-size: 12px;
    }
  }
}
</style>